// utils.getFetch('http://106.55.159.167:8080/education-portal-web/findAdrecycle').then(resp =>{
//     console.log(resp)
//     var {t} = resp
//     console.log(t)
// })

$.get('http://106.55.159.167:8080/education-portal-web/findAdrecycle',resp =>{
    console.log(resp)
    var {t} = resp
    console.log(t)
    $ul = $('nav .bannerx ul')
    $ul.html(t.reduce((html,pic) =>{
        console.log()
        html += `
        <li class="bannerx-active">
            <a href="#">
                <img src="${pic.adPic}" alt="">
            </a>
        </li>
        `
        return html
    },''))
    var bannerx = document.querySelector('.bannerx'),
        imgs = bannerx.querySelectorAll('ul li'),
        btns = bannerx.querySelectorAll('ol li')
    var index = 0
    var lastIndex = 0
    btns.forEach((btn,i) => {
        btn.onclick = function () {
            lastIndex = index
            index = i
            changeImg()
        }
    })
    auto()
    function auto () {
        bannerx.timer = setInterval(() => {
            lastIndex = index
            index++
            if(index ===imgs.length ) index = 0
            changeImg()
        },2000)
    }

    bannerx.onmouseenter = function () {
        clearInterval(bannerx.timer)
    }
    
    bannerx.onmouseleave = auto
    
    function changeImg () {
        btns[lastIndex].classList.remove('banner-active')
        btns[index].classList.add('banner-active')
        imgs[lastIndex].classList.remove('bannerx-active')
        imgs[index].classList.add('bannerx-active')
    }
},'json')
